<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>个人中心 | Any-Video</title>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body style="background-color: #f1f1f1">

<div th:insert="~{header :: nav}"></div>

<div class="container" style="margin-top: 50px">

    <!-- 个人信息 -->
    <div class="row" style="padding: 20px; border-bottom: solid;">
        <div class="col-md-1 col-xs-4">
            <img src="/image/avatar.png" class="img-circle" style="padding: 0 10px 0 10px">
        </div>
        <div class="col-md-4 col-xs-8" style="margin-top: 12px">
            <p><span class="glyphicon glyphicon-credit-card"></span> 昵称：[[${user.nickname}]]</p>
            <p><span class="glyphicon glyphicon-envelope"></span> 邮箱：[[${user.username}]]</p>
        </div>
        <div class="pull-right" style="line-height: 72px;">
            <button class="btn btn-danger" data-toggle="modal" data-target="#updateModal">修改资料</button>
            <form th:action="@{/logout}" method="post" style="display: inline-block">
                <input type="submit" value="退出登录" class="btn btn-danger"/>
            </form>
        </div>
    </div>
    <!-- End 个人信息 -->

    <!-- 分类列表 -->
    <div class="row" style="padding: 20px;">
        <div class="row text-center inner">
            <div class="col-md-3 col-xs-6" th:each="category : ${categories}" style="margin-bottom: 20px">
                <div class="feature-content">
                    <img th:src="@{{url}(url=${category.logo})}" alt="Image" class="img-responsive" />
                    <h4 class="feature-content-title blue-text" th:text="${category.name}"></h4>
                    <p style="color: #d9534f; padding-bottom: 5pzx">
                        <span class="glyphicon glyphicon-facetime-video"></span> [[${category.amount}]]
                        <span class="glyphicon glyphicon-fire" style="margin-left: 20px"></span> [[${category.popularity}]]
                    </p>
                    <a th:href="@{/user/item/{id}(id=${category.id})}" class="btn btn-info"> 浏览 </a>
                    <button class="btn btn-danger deleteBtn" style="margin-left: 10px" data-toggle="modal" data-target="#deleteModal" th:value="${category.id}"> 删除 </button>
                </div>
            </div>
        </div>
    </div>
    <!-- End 分类列表 -->

    <!-- 创建新的分类 -->
    <div class="row" style="padding: 20px;text-align: center">
        <button class="btn btn-success" data-toggle="modal" data-target="#createModal"><span class="glyphicon glyphicon-plus"></span> 新建分类</button>
    </div>
    <!-- End 创建新的分类 -->

    <!-- 删除 模态框 -->
    <div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title">
                        删除分类
                    </h4>
                </div>
                <div class="modal-body" style="text-align: center" id="deleteBody">
                    <p>
                        确定删除 <b style="color: red" id="name"></b> ?
                    </p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                    </button>
                    <button type="button" class="btn btn-danger" id="deleteCategory">
                        确定
                    </button>
                </div>
            </div>
        </div>
    </div>
    <!-- End 删除 模态框 -->

    <!-- 新建 模态框 -->
    <div class="modal fade" id="createModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title">
                        新建分类
                    </h4>
                </div>
                <div class="modal-body" style="text-align: center" id="createBody">
                    <form>
                        <div class="form-group">
                            <label for="nameInput">分类名称</label>
                            <input type="text" class="form-control" id="nameInput" />
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                    </button>
                    <button type="button" class="btn btn-info" id="createCategory">
                        确定
                    </button>
                </div>
            </div>
        </div>
    </div>
    <!-- End 新建 模态框 -->

    <!-- 修改个人资料 模态框 -->
    <div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title">
                        修改资料
                    </h4>
                </div>
                <div class="modal-body" style="text-align: center" id="updateBody">
                    <form>
                        <div class="form-group">
                            <label for="nicknameInput">昵称</label>
                            <input type="text" class="form-control" id="nicknameInput" />
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                    </button>
                    <button type="button" class="btn btn-info" id="updateUserInfo">
                        确定
                    </button>
                </div>
            </div>
        </div>
    </div>
    <!-- End 修改个人资料 模态框 -->

</div>

<script style="text/javascript">

    var api;
    
    function deleteApi(id){
        return "/user/category/delete/" + id;
    }


    $("document").ready(function () {

        /* 新建分类 */
        $("#createCategory").click(function (){
            $("#info").remove();
            $.post("/user/category/add",{
                "name": $("#nameInput").val()
            }, function (data) {
                if (data.code == 100){
                    window.location.reload();
                }else {
                    var info = $("<p id=\"info\" style=\"color:red;margin-top: 10px;\"></p>");
                    info.text("新建失败，请重新登录！");
                    $("#createBody").append(info);
                }
            });
        });


        $(".deleteBtn").click(function (){
            var name = $(this).parent().find("h4").eq(0).text();
            $("#name").text(name);
            api = deleteApi($(this).val());
        });

        /* 删除分类 */
        $("#deleteCategory").click(function (){
            $.get(api,function (data) {
                if (data.code == 100){
                    window.location.reload();
                }else {
                    var info = $("<p id=\"info\" style=\"color:red;margin-top: 10px;\"></p>");
                    info.text("删除失败，请刷新页面后重试！");
                    $("#deleteBody").append(info);
                }
            })
        });

        $("#updateUserInfo").click(function (){
            var nickname = $("#nicknameInput").val();
            $.post("/user/name",{
                "nickname": nickname
            },function (data) {
                if (data.code == 100){
                    window.location.reload();
                }else {
                    var info = $("<p id=\"info\" style=\"color:red;margin-top: 10px;\"></p>");
                    info.text(data.message);
                    $("#updateBody").append(info);
                }
            })
        });
    });
</script>
</body>
</html>
